<!DOCTYPE HTML>
<html>
<head>
<title>Ethiopia Family Medecine Assessment</title>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.5.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
<script src="jquery-1.5.min.js"></script>
<script src="jquery.query-2.1.7.js"></script>
<script src="ethiopia.js"></script>
<script src="persistence.js" type="application/javascript"></script>
<script src="persistence.store.sql.js" type="application/javascript"></script>
<script src="persistence.store.websql.js" type="application/javascript"></script>
<script src="jquery.mobile-1.0a4.min.js"></script>
<script src="jquery.easytimepicker.js" type="application/javascript"></script>
<script src="jquery.easytimepicker.mobile.js" type="application/javascript"></script>
<!-- <script src="jquery.easytimepicker.combined.js" type="application/javascript"></script> -->
<link rel="stylesheet" href="ethiopia.css" />
</head>

<body>

<div data-role="page">

	<div data-role="header" data-theme="b" zdata-position="fixed">
		<h1>Non Clinical Activity</h1>
		<a href="activities.html" class='ui-btn-left ui-btn-back' data-icon='arrow-l' rel="external">Back</a>
		<div data-inline="true" class="ui-btn-right">
			<a  id="newclinical" data-role="button" data-icon="plus" >New clinical</a>
			<a id="newnonclinical" data-role="button" data-icon="plus" >New non clinical</a>
		</div>
		<p id="activityIdPlacer" class="activity-head"></p>
	</div><!-- /header -->

	<div data-role="content" data-theme="b" id="acivityview">
	<ul data-role="listview">
				<li id="date-time-li" data-role="list-divider">Non Clinical Encounter: </li>
				<li data-role="fieldcontain" >
					<div id="periods-content">
					</div>
					<form id="form-periods" action="javascript:;" >
						<fieldset data-role="fieldcontain"  >
							<div class="ui-grid-a" >
								<div class="ui-block-a">
									<label for="start">Start time</label>
									<a data-role="button" id="start-period-btn">Choose...</a>
									<div id="start-period-placer"></div>
									<!-- <a data-role="button"  id="to-now" data-inline="true" >set to now</a> -->
								</div>
								<div class="ui-block-b">
									<label for="end">End time</label>
									<a data-role="button" id="end-period-btn">Choose...</a>
									<div id="end-period-placer"></div>
									<input data-inline="true" data-role="button" data-icon="plus"  type="submit" id="submit-add-period" value="add period" />
								</div>
							</div>
						</fieldset>
					</form>
				</li>
				<li data-role="list-divider">Personal (face-to-face) communication</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>With other GPs</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="pcwithothergp" id="pcwithothergp-true" value="yes" />
					         	<label for="pcwithothergp-true" >Yes</label>
					         	<input type="radio" name="pcwithothergp" id="pcwithothergp-false" value="no"  />
					         	<label for="pcwithothergp-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>With specialist</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="pcwithspecialist" id="pcwithspecialist-true" value="yes" />
					         	<label for="pcwithspecialist-true" >Yes</label>
					         	<input type="radio" name="pcwithspecialist" id="pcwithspecialist-false" value="no"  />
					         	<label for="pcwithspecialist-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>With other health care providers</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="pcwithotherhealthcare" id="pcwithotherhealthcare-true" value="yes" />
					         	<label for="pcwithotherhealthcare-true" >Yes</label>
					         	<input type="radio" name="pcwithotherhealthcare" id="pcwithotherhealthcare-false" value="no"  />
					         	<label for="pcwithotherhealthcare-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>With trainees</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="pcwithtrainees" id="pcwithtrainees-true" value="yes" />
					         	<label for="pcwithtrainees-true" >Yes</label>
					         	<input type="radio" name="pcwithtrainees" id="pcwithtrainees-false" value="no"  />
					         	<label for="pcwithtrainees-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>With patient or patient's family</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="pcwithpatient" id="pcwithpatient-true" value="yes" />
					         	<label for="pcwithpatient-true" >Yes</label>
					         	<input type="radio" name="pcwithpatient" id="pcwithpatient-false" value="no"  />
					         	<label for="pcwithpatient-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Other:</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="pcother" id="pcother-true" value="yes" />
				         	<label for="pcother-true" >Yes</label>
				         	<input type="radio" name="pcother" id="pcother-false" value="no"  />
				         	<label for="pcother-false" >No</label>
			         	 </div>
			         	 <div data-role="fieldcontain">
							<textarea cols="35" rows="8" name="pcothertxt-textarea" id="pcothertxt-textarea"></textarea>
						</div>
				    </fieldset>
				</li>

				<li data-role="list-divider">Leadership and Management</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Entering paper charts</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmwritingcharts" id="lmwritingcharts-true" value="yes" />
					         	<label for="lmwritingcharts-true" >Yes</label>
					         	<input type="radio" name="lmwritingcharts" id="lmwritingcharts-false" value="no"  />
					         	<label for="lmwritingcharts-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Entering digital charts</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmwritingchartsdigital" id="lmwritingchartsdigital-true" value="yes" />
					         	<label for="lmwritingchartsdigital-true" >Yes</label>
					         	<input type="radio" name="lmwritingchartsdigital" id="lmwritingchartsdigital-false" value="no"  />
					         	<label for="lmwritingchartsdigital-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Phone calls</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmphonecalls" id="lmphonecalls-true" value="yes" />
					         	<label for="lmphonecalls-true" >Yes</label>
					         	<input type="radio" name="lmphonecalls" id="lmphonecalls-false" value="no"  />
					         	<label for="lmphonecalls-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Supervision</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmsupervision" id="lmsupervision-true" value="yes" />
					         	<label for="lmsupervision-true" >Yes</label>
					         	<input type="radio" name="lmsupervision" id="lmsupervision-false" value="no"  />
					         	<label for="lmsupervision-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Coordinating activity</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmcoordinating" id="lmcoordinating-true" value="yes" />
					         	<label for="lmcoordinating-true" >Yes</label>
					         	<input type="radio" name="lmcoordinating" id="lmcoordinating-false" value="no"  />
					         	<label for="lmcoordinating-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Handling complaints or problem-solving activity</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmcomplaints" id="lmcomplaints-true" value="yes" />
					         	<label for="lmcomplaints-true" >Yes</label>
					         	<input type="radio" name="lmcomplaints" id="lmcomplaints-false" value="no"  />
					         	<label for="lmcomplaints-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Emails or text messages</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmemails" id="lmemails-true" value="yes" />
					         	<label for="lmemails-true" >Yes</label>
					         	<input type="radio" name="lmemails" id="lmemails-false" value="no"  />
					         	<label for="lmemails-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Committee meetings</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="lmcommittee" id="lmcommittee-true" value="yes" />
					         	<label for="lmcommittee-true" >Yes</label>
					         	<input type="radio" name="lmcommittee" id="lmcommittee-false" value="no"  />
					         	<label for="lmcommittee-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Other:</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="lmother" id="lmother-true" value="yes" />
				         	<label for="lmother-true" >Yes</label>
				         	<input type="radio" name="lmother" id="lmother-false" value="no"  />
				         	<label for="lmother-false" >No</label>
			         	 </div>
			         	 <div data-role="fieldcontain">
							<textarea cols="35" rows="8" name="lmothertxt-textarea" id="lmothertxt-textarea"></textarea>
						</div>
				    </fieldset>
				</li>

				<li data-role="list-divider">Scholarship</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Teaching</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="scteaching" id="scteaching-true" value="yes" />
					         	<label for="scteaching-true" >Yes</label>
					         	<input type="radio" name="scteaching" id="scteaching-false" value="no"  />
					         	<label for="scteaching-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Research -eg. Epidemic investigation</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="scinvestigation" id="scinvestigation-true" value="yes" />
					         	<label for="scinvestigation-true" >Yes</label>
					         	<input type="radio" name="scinvestigation" id="scinvestigation-false" value="no"  />
					         	<label for="scinvestigation-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Writing reports</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="screports" id="screports-true" value="yes" />
					         	<label for="screports-true" >Yes</label>
					         	<input type="radio" name="screports" id="screports-false" value="no"  />
					         	<label for="screports-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
							<div class="ui-block-a"><h1>Reading or studying</h1></div>
							<div class="ui-block-b">
					         	<input type="radio" name="screading" id="screading-true" value="yes" />
					         	<label for="screading-true" >Yes</label>
					         	<input type="radio" name="screading" id="screading-false" value="no"  />
					         	<label for="screading-false" >No</label>
				         	 </div>
				    </fieldset>
				</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Other:</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="scother" id="scother-true" value="yes" />
				         	<label for="scother-true" >Yes</label>
				         	<input type="radio" name="scother" id="scother-false" value="no"  />
				         	<label for="scother-false" >No</label>
			         	 </div>
			         	 <div data-role="fieldcontain">
							<textarea cols="35" rows="8" name="scothertxt-textarea" id="scothertxt-textarea"></textarea>
						</div>
				    </fieldset>
				</li>


				<li data-role="list-divider">Community education or community outreach</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Describe:</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="ceother" id="ceother-true" value="yes" />
				         	<label for="ceother-true" >Yes</label>
				         	<input type="radio" name="ceother" id="ceother-false" value="no"  />
				         	<label for="ceother-false" >No</label>
			         	 </div>
			         	 <div data-role="fieldcontain">
							<textarea cols="35" rows="8" name="ceothertxt-textarea" id="ceothertxt-textarea"></textarea>
						</div>
				    </fieldset>
				</li>

				<li data-role="list-divider">Other</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Describe:</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="other" id="other-true" value="yes" />
				         	<label for="other-true" >Yes</label>
				         	<input type="radio" name="other" id="other-false" value="no"  />
				         	<label for="other-false" >No</label>
			         	 </div>
			         	 <div data-role="fieldcontain">
							<textarea cols="35" rows="8" name="othertxt-textarea" id="othertxt-textarea"></textarea>
						</div>
				    </fieldset>
				</li>

				<li data-role="list-divider">COMPLETE</li>
				<li data-role="fieldcontain" >
					<fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain" class="ui-grid-a" >
						<div class="ui-block-a"><h1>Complete ?</h1></div>
						<div class="ui-block-b">
				         	<input type="radio" name="complete" id="complete-true" value="yes" />
				         	<label for="complete-true" >Yes</label>
				         	<input type="radio" name="complete" id="complete-false" value="no"  />
				         	<label for="complete-false">No</label>
			         	 </div>
				    </fieldset>
				</li>
				<li id="complete-light"></li>
	</ul>
	</div>
</div>
</body>


<script>
initApp(renderActivityView);

//$("#othertxt-textarea").bind('focusout',function() {
//	alert("focusout");
//});

function updateAndBindBoolField(entity,field){
	var val = persistence.get(entity, field);
	$("#"+field+"-"+val).attr('checked', true).checkboxradio("refresh");
	$("#"+field+"-"+!val).attr('checked', false).checkboxradio("refresh");

	// for "other" field
	if(field.indexOf("other")>=0){
		if(val==true){
			$("#"+field+"txt-textarea").show();
		}else{
			$("#"+field+"txt-textarea").hide();
		}
	}

	$("#"+field+"-"+true).bind("change",function(){
		persistence.set(entity, $(this).attr("name"), true);
		persistence.flush();
		if(field=="complete"){
			updateActivityHead();
		}
		// for "other" field
		if(field.indexOf("other")>=0){
			$("#"+field+"txt-textarea").show();
		}
	});
	$("#"+field+"-"+false).bind("change",function(){
		persistence.set(entity, $(this).attr("name"), false);
		persistence.flush();
		if(field=="complete"){
			updateActivityHead();
		}
		// for "other" field
		if(field.indexOf("other")>=0){
			$("#"+field+"txt-textarea").hide();
		}
	});
}


function buildEntityNameLC(entityName){
	var entityNameLC = entityName.toLowerCase();
	return entityNameLC;
}


function updateAndBindTextField(entity,field){
	var val = persistence.get(entity, field);
	$("#"+field+"-textarea").val(val);

	$("#"+field+"-textarea").bind("focusout",function(){
		console.log($(this).val());
		persistence.set(entity, field, $(this).val());
		persistence.flush();
	});
}

function renderActivityContentView() {
	showDefaultMessage();
	//Binding activity core data
	updateAndBindBoolField(activity,"complete");

	// automatically retrieve fields of nonclinical and binding them to the UI checkboxes
	var nonclinical = activity.nonclinical;
	var fields = persistence.getEntityMeta().NonClinical.fields;
	for(var field in fields) {
        var fieldType = fields[field];
        // BOOL fields only
        if(fieldType=="BOOL"){
        	updateAndBindBoolField(nonclinical,field);
        }
        if(fieldType=="TEXT"){
        	updateAndBindTextField(nonclinical,field);
        }
     }

	renderDateView();
	updateActivityHead();
	hideMessage();
}

function buildCompletionLight(){
	var completeStr = '<span class="ui-icon-complete-' + activity.complete;
	if(!activity.complete) {
		completeStr += '">incomplete</span>';
	}else{
		completeStr += '">_complete_</span>';
	}
	return completeStr;
}

function updateActivityHead(){
	$("#activityIdPlacer").text("Non Clinical #"+activity.num +" / "+formatDate(activity.day)).append(" / "+buildCompletionLight());
	$("#complete-light").empty();
	$("#complete-light").append(buildCompletionLight());
}

var activityId;
var activity;
var datanativemenu;

function renderActivityView(){
	if (typeof device  != "undefined"){
		document.addEventListener("backbutton", function(){goToPage("activities.html");}, false);
	}
	activityId = $.query.get('act');
	var datanativemenu=true;
	Activity.all().filter("id", '=', activityId).prefetch("nonclinical").one(function(result){
		activity = result;
		persistence.add(activity);
		renderActivityContentView();
	});
}

$('#newclinical').bind('click',function() {
	newClinical(function(activity){
		var str = "activity.html?act=" + activity.id;
		window.location.href = str;
	});
});

$('#newnonclinical').bind('click',function() {
	newNonClinical(function(activity){
		var str = "ncactivity.html?act=" + activity.id;
		window.location.href = str;
	});
});



function renderStartInputTime(){
	$("#start-period-btn").remove();
	$("#start-period-placer").append('<input type="time" name="start-period" id="start-period" data-interval="1" data-display-24hour="false" data-value-24hour="true" data-start-time="360" data-end-time="1200" data-native-menu="true"/>');
	$("#start-period-placer").page();
}


function renderEndInputTime(){
	$("#end-period-btn").remove();
	$("#end-period-placer").append('<input type="time" name="end-period" id="end-period" data-interval="1" data-display-24hour="false" data-value-24hour="true" data-start-time="360" data-end-time="1200" data-native-menu="true"/>');
	$("#end-period-placer").page();
}

function renderDateView(){

	$("#date-time-li").append(" " + activity.day.toDateString());

	$("#start-period-btn").bind('click',function() {
		showDefaultMessage();
		renderStartInputTime();
		hideMessage();
	});

	$("#end-period-btn").bind('click',function() {
		showDefaultMessage();
		renderEndInputTime();
		hideMessage();
	});

	$("#to-now").live('click',function() {
		showDefaultMessage();
		if( (!$("#start-period").val()) ){
			renderStartInputTime();
		}
		if( (!$("#end-period").val()) ){
			renderEndInputTime();
		}
		var now = new Date();
		var timeStr = formatTime(now);
		$("#start-period").val(timeStr);
		$("#end-period").val(timeStr);
		hideMessage();
	});

	$("#submit-add-period").live('click',function() {
		if( (!$("#start-period").val()) || (!$("#end-period").val()) ){
			alert("Before, please choose a start and an end time for period.");
			return;
		}
		var strStartTime = $("#start-period").val();
		var startTimeArr = strStartTime.split(":");
		var startH = parseInt(startTimeArr[0],10);
		var startM = parseInt(startTimeArr[1],10);

		var currActDate = activity.day;
		var currActDateMilli = currActDate.getTime();
		var startDateForDB = new Date(currActDateMilli + 3600000*startH + 60000*startM);

		var strEndTime = $("#end-period").val();
		var endTimeArr = strEndTime.split(":");
		var endH = parseInt(endTimeArr[0],10);
		var endM = parseInt(endTimeArr[1],10);
		var endDateForDB = new Date(currActDateMilli + 3600000*endH + 60000*endM);
		// add one more day if endtime is smaller than starttime (for midnight situations...)
		var keepGoing = true;
		if(endDateForDB<startDateForDB){
			endDateForDB = new Date(currActDateMilli + 3600000*endH + 60000*endM + 86400000);
			keepGoing = confirm("End Time is before Start Time, please correct and continue.");
			keepGoing = false;	// do not add if start & end times are inconsistent
		}

		if(keepGoing){
			var period = new Period({start: startDateForDB,end: endDateForDB});
			activity.periods.add(period);
			persistence.flush(function(){
				updatePeriodMinMax(renderPeriodView());
			});
		}

	});

	updatePeriodMinMax(renderPeriodView());
}

function updatePeriodMinMax(callback){
	// retrieving min date for activity
	activity.periods.order('start',true).limit(1).one(function(periodStartMin){
		if(periodStartMin!=null){
			activity.veryfirsttime = periodStartMin.start;
		}else{
			activity.veryfirsttime = activity.creationdate;
		}
		// retrieving max date for activity
		activity.periods.order('end',false).limit(1).one(function(periodEndMax){
			if(periodEndMax!=null){
				activity.veryendtime = periodEndMax.end;
			}else{
				activity.veryendtime = null;
			}
			persistence.flush(function(){
				if (callback) callback();
			});
		});
	});
}


function setLivePeriodDel(periodId){
	$('#del-'+periodId).die("click");
	$('#del-'+periodId).live("click",function(){
		activity.periods.filter("id","=",periodId).one(function(period){
			activity.periods.remove(period);
			persistence.remove(period);
			persistence.flush(function(){
				updatePeriodMinMax(renderPeriodView());
			});
		});
	});
}

function renderPeriodView(){
	activity.periods.order('start',false).list(function(periods){
		var str ='<div id="periods-content-ul">';
		str +='<ul data-role="listview" data-inset="true" data-role="fieldcontain">';
		for(var i=0;i<periods.length;i++){
			var period = periods[i];
			var periodEndStr = '__:__';
			if(period.end){
				periodEndStr = formatTime(period.end);
			}
			str +='<li>';
			str +='<div class="ui-grid-b">';
			str +='<div class="ui-block-a"><a data-role="button" data-icon="delete" data-iconpos="notext" id="del-'+period.id+'">del</a></div>';
			str +='<div class="ui-block-b"><h2>'+formatTime(period.start)+' - '+periodEndStr+'</h2></div>';
			str +='</div>';
			str +='</li>';

			setLivePeriodDel(period.id);

		}
		str +='</ul>';
		str +='</div>';

		$("#"+"periods-content").empty();
		if(periods.length==0){
			str = '<p class="activity-selections">No periods for this activity, please choose...</p>';
		}
		$("#"+"periods-content").append(str);
		$("#"+"periods-content-ul").page();
	});
}

</script>
</html>